
<template>
  <div class="mt-2 my-3">
    <router-link
      v-for="item in navList" :key="item.value"
      :class="[
        'block my-2 border rounded-md px-4 py-2 hover:bg-dark-100 hover:text-light-100', 
        active === item.value ? 'bg-dark-100 text-light-100': ''
      ]" 
      :to="item.value === 'home' ? '/': item.value"
    >
      {{ item.label }}
    </router-link>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive, Ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';
// router
const router = useRouter()
const route = useRoute()
// defineProps<{ active: string }>()

const active: Ref = ref('home')
const navList = reactive([
  {
    value: 'home',
    label: '主页'
  },
  {
    value: 'history',
    label: '历史记录'
  },
  {
    value: 'collection',
    label: '收藏'
  },
  {
    value: 'rule',
    label: '高级规则'
  },
  {
    value: 'test',
    label: '测试'
  }
])

//直接监听
watch(route, (newValue, oldValue) => {
  console.log('route', route.name)
  active.value = route.name
})

</script>

<style scoped>

</style>
